<template>
	<view class="thingslist-container">
		<view class="things-head">
			<view class="head1"><u-search placeholder="搜索" shape="square" v-model="keyword"></u-search></view>
			<view class="head2"><u-tabs :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs></view>
		</view>
		<view class="things-content">
			<view class="things-item" v-for="(item,index)  in thingsList" :key="index" @click="handleGoThingInfo(item.id)">
				<view class="things-item-head">
					<view class="things-item-head-left">{{ item.title }}</view>
					<view class="things-item-head-right">{{ item.status }}</view>
				</view>
				<view class="things-item-middle">
					<view class="things-item-middle-img"><image mode="widthFix" src="../../static/icon/dizhi.png"></image></view>
					<view class="things-item-middle-text">{{ item.address }}</view>
				</view>
				<view class="things-item-bottom">
					<view class="things-item-bottom-left">类型:<text>{{ item.type }}</text></view>
					<view class="things-item-bottom-right">提报时间:<text>{{ item.time }}</text></view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="status" icon-color="#007AFF" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loading',
				tolnum:0,
				pageNo:1,
				pageSize:10,
				total: 10,
				keyword: '',
				list: [{
					name: '全部'
				}, {
					name: '我上报'
				}, {
					name: '待处理'
				},{
					name: '进行中'
				},{
					name: '已完结'
				}],
				current: 0,
				thingsList:[]
			}
		},
		mounted() {
			
		},
		onShow() {
			this.thingsList = []
			this.getMyEvent()
		},
		// 上拉
		onReachBottom() {
			this.pageNo = this.pageNo + 1
			if(this.pageNo > this.tolnum) {
				return this.status = 'nomore'
			}
			this.getMyEvent()
		},
		// 下拉
		onPullDownRefresh() {
			this.thingsList=[]
			this.pageNo = 1
			this.status = 'loading'
			this.getMyEvent()
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1500);
		},
		methods:{
			change(index) {
				this.status = 'loading'
				this.current = index
				this.thingsList = []
				this.pageNo = 1
				this.getMyEvent()
			},
			handleGoThingInfo(id) {
				uni.navigateTo({
					url:'../ThingsInfo/ThingsInfo?id='+id
				})
			},
			onNavigationBarButtonTap() {
			    uni.navigateTo({
			    	url:'./ThingsUpload/ThingsUpload'
			    })
			},
			getMyEvent() {
				let params = {
					current:this.pageNo,
					size:this.pageSize,
					type:this.current
				}
				this.$u.api.getMyEvent(params)
					.then(res => {
						console.log(res)
						if(res.code == 200) {
							if (res.result.total == 0) return this.status = 'nomore'
							let type = ''
							let status = ''
							this.tolnum = res.result.pages
							res.result.records.forEach(item => {
								this.thingsList.push({
									title:item.title,
									status:item.eventStatus_dictText,
									address:item.address,
									type:item.eventType_dictText,
									time:item.submitDate,
									id:item.id
								})
							})
							if(this.pageNo == 1) {
								if(this.pageNo == this.tolnum) {
									this.status = 'nomore'
								}
							}
							this.status = 'nomore'
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.thingslist-container{
		background-color: #f5f6f7;
		min-height: 100vh;
		.things-head{
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 180rpx;
			padding: 20rpx;
			z-index: 10;
			.head1{
				border-bottom: 1px solid #f4f1f1;
				padding-bottom: 20rpx;
			}
			.head2{}
		}
		.things-content{
			padding: 200rpx 20rpx 20rpx 20rpx;
			.things-item{
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-direction: column;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 3px 3px 3px #eee;
				margin-bottom: 20rpx;
				height: 170rpx;
				.things-item-head{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.things-item-head-left{
						width: 590rpx;
						color: #000;
						font-size: 28rpx;
						font-weight: 600;
						  display: -webkit-box;
						  overflow: hidden;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 1;
					}
					.things-item-head-right{
						color: #F0AD4E;
						background-color: #fdf4e3;
						padding: 2rpx 5rpx;
						border-radius: 10rpx;
						font-size: 24rpx;
						width: 90rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				.things-item-middle{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.things-item-middle-img{
						width: 30rpx;
					}
					.things-item-middle-text{
						color: #999;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
				.things-item-bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #999;
					width: 100%;
					font-size: 24rpx;
					.things-item-bottom-left{}
					.things-item-bottom-right{}
				}
			}
		}
	}
</style>
